<template>
  <el-dialog
      v-model="internalModelValue"
      @close="handleClose"
      :title="dialogTitle"
      width="40%"
  >
    <el-form
        ref="formRef"
        style="max-width: 600px"
        :model="form"
        :rules="rules"
        label-width="auto"
        :disabled="formDisabled"
        status-icon>
      <el-form-item label="职位名称" prop="jobTitle">
        <el-input v-model="form.jobTitle" />
      </el-form-item>
      <el-form-item label="职位描述" prop="jobDesc">
        <el-input v-model="form.jobDesc" />
      </el-form-item>
      <el-form-item label="公司描述" prop="companyDesc">
        <el-input v-model="form.companyDesc" />
      </el-form-item>
      <el-form-item label="薪资范围" prop="salaryRange">
        <el-input v-model="form.salaryRange" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script setup>
import {ref, watch} from 'vue'
import axiosUtil from "@/util/axios"
import {ElMessage} from "element-plus"

const emit = defineEmits(['update:modelValue', 'initTableData'])
const props = defineProps({
  modelValue: Boolean,
  jobId: Number,
  operatorType: String
})

const internalModelValue = ref(props.modelValue) // 内部管理的弹框状态
const formDisabled = ref(false)
const dialogTitle = ref('')

const formRef = ref()

const form = ref({
  id: null,
  jobTitle: '',
  jobDesc: '',
  companyDesc: '',
  salaryRange: ''
})

const rules = ref({
  jobTitle: [
    {required: true, message: '请输入职位名称'}
  ],
  jobDesc: [
    {required: true, message: '请输入职位描述'}
  ],
  companyDesc: [
    {required: true, message: '请输入公司描述'}
  ],
  salaryRange: [
    {required: true, message: '请输入薪资范围'}
  ]
})

const initData = async () => {
  try {
    form.value.id = props.jobId
    let result = await axiosUtil.get('/job-info/detail/' + props.jobId)
    if (result.status === 200) {
      const data = result.data
      form.value.jobTitle = data.jobTitle
      form.value.jobDesc = data.jobDesc
      form.value.companyDesc = data.companyDesc
      form.value.salaryRange = data.salaryRange
    }else {
      ElMessage.error('提交失败')
    }
  }catch (e) {
    ElMessage.error('提交失败')
  }
}

// 关闭
const handleClose = () => {
  emit('update:modelValue', false)
  form.value = {} // 清空表单值
  formRef.value.resetFields()
};

// 确认提交
const onSubmit = () => {
  formRef.value.validate(async(valid) => {
    if (valid) {
      try {
        let result = await axiosUtil.postJson('/job-info/modify', form.value)
        if (result.status === 200) {
          ElMessage.success('提交成功')
          emit('update:modelValue', false) // 关闭弹框
          emit('initTableData') // 通知父组件刷新列表
        }else {
          ElMessage.error('提交失败')
        }
      }catch (e) {
        ElMessage.error('提交失败')
      }
    }else {
      ElMessage.error('提交失败')
    }
  })
}

// 同步 props.modelValue 与内部状态
watch(() => props.modelValue, (newVal) => {
  internalModelValue.value = newVal
  if (newVal) {
    if (props.operatorType === 'create') {
      formDisabled.value = false
      dialogTitle.value = '新增招聘信息'
    } else {
      formDisabled.value = props.operatorType === 'view'
      dialogTitle.value = props.operatorType === 'update' ? '修改招聘信息' : '查看招聘信息'
      initData() // 加载数据
    }
  }
})
</script>

<style lang="scss" scoped>

</style>
